<template>
  <div id="one-box">
    <!-- 
      /personalSetting/personal"
      /personalSetting/binding"
      /personalSetting/privacy"
    -->
    <div class="header">
      <h3 class="title">个人设置</h3>
      <div class="screen">
        <router-link to="/personalSetting/personal" tag="div" active-class="screen-active" class="screen-item">基本设置</router-link>
        <router-link to="/personalSetting/binding" tag="div" active-class="screen-active" class="screen-item">绑定设置</router-link>
        <router-link to="/personalSetting/privacy" tag="div" active-class="screen-active" class="screen-item">隐私设置</router-link>
        <!-- <div class="screen-item disabledScreen">绑定设置</div>
        <div class="screen-item disabledScreen">隐私设置</div> -->
      </div>
    </div>
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
  export default {
    name:"personalSetting"  
  }
</script>

<style lang="scss" scoped>
.disabledScreen{
  cursor: no-drop !important;
}
.content{
  margin-top:20px;
}
.header{
  .title{
    color:#333;
    font-size:24px;
  }
  .screen{
    margin-top:4px;
    height:40px;
    display: flex;
    background-image: linear-gradient(#ffffff, #f1f1f1);
    border: 1px solid #ccc;
    border-top:2px solid #ccc;
    align-items: center;
    .screen-item{
      transform: translateY(-1px);
      cursor: pointer;
      line-height: 40px;
      width:135px;
      text-align: center;
      border-top:2px solid rgba(0,0,0,0);

    }
    
    .screen-active{
      border-top:2px solid rgb(209,48,48);
      background-image: linear-gradient(rgb(247,247,247),rgb(255,255,255));
      border-right:1px solid #ccc;
      border-bottom:1px solid #fff;
      border-left:1px solid #ccc;
    }
    .screen-item:first-child{
      border-left:0;
    }
  }
}
</style>